<template>
  <div class="dashboard-container">
    <div class="dashboard-text">
      <el-card shadow="always">
        <div class="dashboard-text">用户名: {{ name }}</div>
        <br />
        <div class="dashboard-text">
          用户角色:
          <span v-for="role in roles" :key="role">
            <!-- 如果role是super,则显示为超级管理员,否则显示为一般管理员 -->
            {{ role === "super" ? "超级管理员" : "机构管理员" }}</span
          >
        </div>
        <br />
        <!-- <div class="dashboard-text">公司编号: {{ companyId }}</div> -->
        <!-- <br /> -->
        <div class="dashboard-text" v-if="this.companyList.length>1">
          当前管理的机构:
          <el-select
            v-model="bindCompanyId"
            placeholder="请选择公司"
            @change="changeCompany"
          >
            <el-option
              v-for="item in companyList"
              :key="item.id"
              :label="item.companyName"
              :value="item.id"
            ></el-option>
          </el-select>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { getAllCompany } from "@/api/user";
//首页
export default {
  name: "home",
  data() {
    return {
      // 绑定的公司编号
      bindCompanyId: "",
      // 公司列表
      companyList: [],
    };
  },
  computed: {
    ...mapGetters(["name", "roles", "companyId"]),
  },
  created() {
    this.bindCompanyId = this.companyId;
    // 如果是超级管理员,则获取公司列表
    if (this.roles.includes("super")) {
      getAllCompany().then((res) => {
        this.companyList = res.data.resList;
      });
    } else {
      this.companyList = [{ id: this.companyId, companyName: "默认公司" }];
    }
  },
  methods: {
    // 切换公司
    changeCompany() {
      this.$store.dispatch("user/updateCompanyId", this.bindCompanyId);
    },
  },
};
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 25px;
    line-height: 46px;
  }
}
</style>
